<template>
  <div class="approval-result">
    <h3> 审批结果</h3>
    <div class="showMessage">
    <div class="approval-status">
      <el-icon class="status-icon"><warning-filled /></el-icon>
      <h4>审批中</h4>
      <p>稍等，退住申请单正在审批中，若该申请单长时间未处理，请联系{{props.shenpiform.nextApprover}}！</p>
    </div>
    <div class="operation-record">
      <h5>操作记录</h5>
      <el-timeline>
        <el-timeline-item
          v-for="(record, index) in operationRecords"
          :key="index"
          :timestamp="record.time"
          :type="record.type"
          :color="record.color"
          :icon="record.icon"
        >
          <p>{{ record.title }}</p>
          <p>{{ record.desc }}</p>
        </el-timeline-item>
      </el-timeline>
    </div>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import { WarningFilled, DocumentDelete, User } from '@element-plus/icons-vue';
const role = ref(0);
const operationRecords = ref([
  {
    title: '发起申请-申请退住',
    desc: '顾廷烨（已发起）',
    time: '2048-10-15 09:00:00',
    type: 'primary',
    color: '#6a7dfe',
    icon: DocumentDelete
  },
  {
    title: '（角色）审批-申请审批',
    desc: '盛明兰（审批中）',
    time: '',
    type: 'info',
    color: '#409EFF',
    icon: User
  }
]);

const props = defineProps({
  shenpiform: {
    type: Object,
    required: true
  }
});
const changeMsg = ()=>{
  console.log(props.shenpiform);
  operationRecords.value = [
  {
    title: props.shenpiform.currentStep,
    desc: props.shenpiform.approverName+'（已审批）',
    time: props.shenpiform.createTime,
    type: 'primary',
    color: '#6a7dfe',
    icon: DocumentDelete
  },
  {
    title: props.shenpiform.nextStep,
    desc: props.shenpiform.nextApprover +'（审批中）',
    time: '',
    type: 'info',
    color: '#409EFF',
    icon: User
  }
];
}
changeMsg()
// 审批结果绑定变量
const approvalResult = ref('');
const approvalOpinion = ref('');
</script>

<style scoped>
.approval-result {
  max-width: 600px;
  /* margin: 20px auto; */

}
.approval-status {
  text-align: center;
  padding: 30px 0;
}
.status-icon {
  font-size: 40px;
  color: #909399;
  margin-bottom: 16px;
}
.operation-record {
  margin-top: 20px;
  background-color: #eaebed;
  padding: 30px;
}
.operation-record h5 {
  font-size: 16px;
  margin-bottom: 12px;
}
.showMessage{
    width: 100%;
    margin: 20px 350px;
}
.approval-page {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.left-column, .right-column {
  flex: 1;
}
.info-card, .approval-card, .record-card {
  height: fit-content;
}
.card-header {
  font-size: 16px;
  font-weight: bold;
}
</style>